<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0  minimum-scale=1.0, maximum-scale=2.0" />
<meta name="MobileOptimized" content="240" />
<link rel="stylesheet" type="text/css" href="/mobile/css/base.css"/>
<script type="text/javascript" src="/common/js/zepto.js"></script>
<script type="text/javascript" src="/mobile/scripts/context.js" ></script>
<script type="text/javascript" src="/app/scripts/common_lib.js" ></script>
<title>品质从此无忧-麦丰网</title>
<style type="text/css">

body {
	margin: 0px;
	background:#f1f1f1;
	font-family:Helvetica,STHeiti STXihei,Microsoft JhengHei,Microsoft YaHei,Tohoma,Arial;
	text-align: center;
	width:100%;
}

.div-header {
	width: 100%;
	height: 45px;
	color: #FFF;
	margin: 0 auto;
	line-height: 45px;
	text-align: left;
	background: url(images/red_bg.jpg) repeat;
}

#name{ 
	font-size:18px; 
	line-height:45px; 
	padding-left:0px; 
	margin-left:0px;
	width:200px; 
	height:45px; 
	float:left;
	padding-left: 10px;
}

#user{
	background:url(images/user_white.png) no-repeat center;
	width:32px; 
	height:45px; 
	float:right;
	
}

ul,li{list-style:none; padding: 0;margin: 0;}

.div-leader {
	width: 100%;
	max-width:320px;
	height: 25px;
	background-color: transparent;
	margin: 0 auto;
	/*
	left:50%;
	margin-left:-160px;
	position:fixed; 
	*/
}
.table-leader {
	width: 100%;
	text-align: center;
}

table td {
	text-align: center;
}

.menu1{color:#777;line-height:23px; width:12%;  padding:0px 2px; border-bottom:1px solid #CCC;  font-size:14px; }
.menu2{color:#ff3f40;line-height:23px;  width:12%; padding:0px 2px; border-bottom:1px solid #ff3f40; font-weight:bold; font-size:14px;}

.i_box a {
	padding: 2px 5px;
	background-color: #e9e9e9;
	border: 1px solid #ccc;
	text-decoration: none;
	color: #585858;
	line-height: 20px;
}
.i_box * {
	vertical-align: middle;
}
.i_box input {
	width: 30px;
	height: 18px;
	margin: 0 8px;
	padding: 2px;
	border: 1px solid #ccc;
	text-align: center;
	line-height: 16px;
}

.div-banner {
	width:320px;
	height: 195px;
	background-color: white;
	margin: 0 auto;
	margin-top: 5px;
	/*
	left:50%;
	margin-top: 30px;
	margin-left: -160px;
	position: fixed;
	*/
}

.div-content {
	width: 100%;
	max-width: 330px;
	margin: 0 auto;
	margin-top: 8px;
}

.div-section {
	background-color: #FFF;
	text-align: left;
	padding: 8px;
	margin-top: 8px;
}

.div-product {
	width: 100%;
	max-width: 330px;
	height: 150px;
	margin: 0 auto;
	margin-top: 8px;
}

.div-image {
	width: 60%;
	height: 100%;
	float: left;
}

.div-name {
	width: 40%;
	height: 40%;
	float: right;
}

.div-description {
	width: 40%;
	height: 60%;
	float: right;
}

.img-product {
	width: 100%;
	height: 100%;
}

.div-footer {
	width: 100%;
	max-width: 330px;
	height:100px;
	background-color: #CCC;
	top: 100%;
	margin: 0 auto;
	margin-top: 8px;
	margin-bottom: 50px;
}

.div-bottom {
	width: 100%;
	height: 50px;
	top: 100%;
	left:-50%;
	margin-left:50%;
	margin-top: -50px;
	position: fixed;
}

.div-loading {
	width:35px;
	height:35px;
	margin: 0 auto;
	margin-top: 5px;
	margin-bottom: 5px;
	display: none;
}

.img-loading {
	width: 100%;
	height: 100%;
}

#table-bottom { 
	width:100%; 
	height:35px;	
	line-height:35px; 
	background:#333;
	color: #CCC;
	bottom: 0px;
	position: fixed;
}

.td-product-name {
 	background:#b6a98f; 
 	color:#FFFFFF; 
 	font-weight:bold;
 	line-height:25px;
 	text-align: left;
 }
 
 .td-spec {
 	text-align: left;
 }

.menu-down{float:left; border:1px solid #ff3e3f; background:url(images/select_icon.png) #FFF right bottom no-repeat; padding:0px 5px;height:22px; line-height:25px; color:#000000; font-size:14px; margin-right:5px; margin-bottom:5px; text-align:center;}
.menu-up{float:left;border:1px solid #CCCCCC; font-size:14px; padding:0px 5px;height:22px; color:#000000; line-height:25px; margin-right:5px;margin-bottom:5px; text-align:center; background:#FFFFFF}
.menu-note{float:left; border:1px solid #666666; background:url(images/note_icon.png) #FFF right bottom no-repeat; padding:0px 5px;height:22px; line-height:25px; color:#666666; font-size:14px; margin-right:5px; margin-bottom:5px; text-align:center;}


.bitButton{ margin-top:10px;border:0;width:100%; height:40px; font-size:18px; font-weight:bold; background:url(images/button_bg.jpg) repeat; color:#FFFFFF; line-height:28px; text-align:center;}
.bitButton1{ margin-top:10px;border:0;width:100%; height:40px; font-size:18px; font-weight:bold; background:url(images/button_bg3.jpg) repeat; color:#FFFFFF; line-height:28px; text-align:center;}

.smallButton{ 
	border:0;
	background:url(images/button_bg.jpg) repeat; 
	color:#FFFFFF; 
	line-height:28px; 
	text-align:center;
	height:30px; 
	margin-top:10px;	
}
.smallButton1{border:0;height:22px; background:url(images/button_back.jpg) repeat; color:#FFFFFF; text-align:center;}

.smallButton2{ 
	border:0;
	background:url(images/button_bg.jpg) repeat; 
	color:#FFFFFF; 
	text-align:center;
	width:40px; 
	height:22px; 
	margin:0px; 
	padding:0px; 
	line-height:22px; 
	float:right;	
}

.table-receive {
	width: 100%;
}
.table-receive td{
	border-bottom:1px dotted #CCC;
	text-align: left;
	padding-top: 10px;
}
.input-common{width:100%;padding:0 10px;margin:6px 0;height:46px;font-size:16px;border-radius:3px;border:1px #ccc solid;background:#fff;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}

</style>
</head>
<body>
	<div class="div-header">
		<ul>
			<li id="name">订单确认</li>
			<li id="user" onclick="location.href='/'"></li>
		</ul>
	</div>
	
	<div class = "div-content">
		<div class="div-section">
			<font><strong>收件人信息：</strong></font>
			<table class="table-receive">
				<tbody id="tbody-addressee">
		      	</tbody>
		    </table>
		    <input id="button-addressee" onclick="location.href='addressee.html'" class="smallButton" style="background-color:#FF0000; color:#FFFFFF; border:0;display: none;" value=" 修改收件人 " type="button" />
		</div>
		
		<div class="div-section">
			<font><strong>订单明细：</strong></font>
			<table width="100%" border="0" cellspacing="0" cellpadding="5" style="background: #FFF">
				<thead>
					<tr>
					  <th width="60%" height="25" colspan="2" align="left" nowrap="nowrap">商品名称</th>
					  <th width="20%" align="left" nowrap="nowrap">单价</th>
					  <th width="20%" align="left" nowrap="nowrap">数量</th>
					</tr>
				</thead>
				<tbody id="tbody-order">
				</tbody>
				<tfoot>
					<tr>
						<td colspan="5" style="border-bottom:1px #CCCCCC dashed"></td>
					</tr>
					<tr>
						<td style="text-align: right"><span class="d_chva"><strong>商品总金额：</strong></span></td>
						<td style="text-align: right;padding-right: 0;">￥</td>
			    		<td colspan="5" id="td-total-price" style="text-align: left;padding-left: 0px;"></td>
					</tr>
					<tr>
						<td style="text-align: right"><span class="d_chva"><strong>运费：</strong></span></td>
						<td style="text-align: right;padding-right: 0;">￥</td>
			    		<td colspan="5" id="td-express-cost" style="text-align: left;padding-left: 0px;"></td>
					</tr>
					<tr>
						<td style="text-align: right"><span class="d_chva"><strong>使用余额：</strong></span></td>
						<td style="text-align: right;padding-right: 0;">-￥</td>
			    		<td colspan="5" id="td-cash-used" style="text-align: left;padding-left: 0px;"></td>
					</tr>
					<tr>
						<td style="text-align: right"><span class="d_chva"><strong>使用金币：</strong></span></td>
						<td style="text-align: right;padding-right: 0;">-￥</td>
			    		<td colspan="5" id="td-gold-coin-used" style="text-align: left;padding-left: 0px;"></td>
					</tr>
					<tr>
						<td colspan="5" style="border-bottom:1px #CCCCCC dashed"></td>
					</tr>
					<tr>
						<td style="text-align: right"><span class="d_chva"><strong>应付金额：</strong></span></td>
						<td style="text-align: right;padding-right: 0;"><strong>￥</strong></td>
			    		<td colspan="5" id="td-pay-amount" style="text-align: left;padding-left: 0px;"></td>
					</tr>
					<tr>
						<td style="text-align: right"><span class="d_chva"><strong>返利：</strong></span></td>
						<td style="text-align: right;padding-right: 0;"><strong>￥</strong></td>
			    		<td colspan="5" id="td-rebate" style="text-align: left;padding-left: 0px;"></td>
					</tr>
				</tfoot>
			</table>
		</div>
		
		<div class="div-section">
			<form id="form-account">
			<div>
				<input type="checkbox" name="use_gold_coin" onchange="toggleGoldCoin()"/>使用金币(拥有：<span id="account-gold-coin"></span>个金币)
			</div>
			<div id="div-gold-coin" style="display: none;padding-top: 20px;">
				<table border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td style="text-align: right;">订单使用金币：</td>
						<td style="text-align: right;"><span id="use-gold-coin"></span>个</td>
					</tr>
					<tr>
						<td style="text-align: right;">剩余金币：</td>
						<td style="text-align: right;"><span id="left-gold-coin"></span>个</td>
					</tr>
				</table>
			</div>
			
			<div style="padding-top: 20px">
				<input type="checkbox" name="use_cash" onchange="toggleCash()"/>使用余额(当前余额: <span id="account-cash"></span>元)
			</div>
			<div id="div-cash" style="display: none;padding-top: 20px;">
				<table border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td style="text-align: right;">订单使用余额：</td>
						<td style="text-align: right;"><span id="use-cash"></span>元</td>
					</tr>
					<tr>
						<td style="text-align: right;">剩余：</td>
						<td style="text-align: right;"><span id="left-cash"></span>元</td>
					</tr>
				</table>
				
			</div>
			</form>
		</div>
			
		<div class="div-section">
			<font><strong>添加备注：</strong></font>
			<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background: #FFF">
				<tr>
					<td colspan="3"><textarea name="order_note" rows="3" id="order_note" style="width: 100%;padding: 0;"></textarea></td>
				</tr>
				<tr>
					<td colspan="3" align="center">
						<input type="button" id="button-pay" class="bitButton" value="确认并在线支付" onclick="payOrders()"/><br />
					</td>
				</tr>
			</table>
		</div>
		
		<div style="background:url(images/line.png) repeat-x; width:100%; margin:5px 0; height:18px;display: none;"></div>
	</div>
	<div class = "div-footer">
		<iframe class = "iframe-view" src="/mobile/footer.html" style="padding: 0;margin: 0;width: 100%;height: 100%;" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
	</div>
	<div class = "div-bottom">
		<iframe class = "iframe-view" src="/mobile/bottom.html" style="padding: 0;margin: 0;width: 100%;height: 100%;" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
	</div>
</body>
<script type="text/javascript">
	$(document).ready(function() {
		cjl.getTitle();
		getPrimeAddressee();
		getOrderConfirm();
	});
	
	function getPrimeAddressee() {
		var url = "/addressee/prime";
		cjl.get(url, {}, function(body) {
			var addressee = body;
			$addressee = $("#tbody-addressee").empty();
			
			if((addressee !=  null) && (addressee != "")) {
				var html = '';
				html += '<tr>';
				html += '<td width="3%"><input name="addressee" type="radio" checked="checked" value="'+addressee.id+'"/></td>';
				html += '<td>';
				html += '收件人：'+addressee.rec_name+'<br>';
				html += '电　话：'+addressee.phone+'<br>';
				html += '地　址：'+addressee.province+' '+addressee.city+' '+addressee.area+' '+addressee.address;
				html += '</td>';
				//html += '<td width="6%"><img src="images/edit-button.png" style="width:20px;height:20px;" onclick="editAddressee('+addressee.id+')"/></td>';
				html += '</tr>';	
				$addressee.append(html);
			}
		});
	}	
	
	function editAddressee(id) {
		alert(id);
	}
	
	
	function getOrderConfirm() {
		var url = "/order/confirm";
		var params = $("#form-account").serialize();
		cjl.get(url, params, function(body) {
			var orderList = body.orderList;
			var addressee = body.addressee;
			var orderGroup = body.orderGroup;
			var account = body.account;
			var left_cash = body.leftCash;
			var left_gold_coin = body.leftGoldCoin;
			$("#tbody-order").empty();
			
			if(addressee == null) {
				$("#button-addressee").val(" 添加收件人 ");
				$("#button-addressee").show();
			} else {
				$("#button-addressee").val(" 修改收件人 ");
				$("#button-addressee").show();
			}
			
			for(var o in orderList) {
				var order = orderList[o];
				var html = '';
				html += '<tr>';
				html += '<td colspan="4" valign="middle" class="td-product-name">产品名称：'+order.product_name+'<input type="button" class="smallButton2" value="修改" onclick="location.href=\'orderEdit.html?id='+order.id+'\'" /></td>';
				html += '</tr>';
				html += '<tr>';
				html += '<td colspan="2" valign="middle" class="td-spec">'+order.catalog_name+' '+order.specification_name+'</td>';
				html += '<td valign="middle" nowrap="nowrap" class="td-spec">￥'+order.price.toFixed(2)+'</td>';
				html += '<td align="center" nowrap="nowrap" class="td-spec">'+order.quantity+'</td>';
				html += '</tr>';	
				$("#tbody-order").prepend(html);
			}
			
			$("#td-total-price").html(orderGroup.total_price.toFixed(2));
			$("#td-express-cost").html(orderGroup.express_cost.toFixed(2));
			$("#td-cash-used").html(orderGroup.cash_used.toFixed(2));
			$("#td-gold-coin-used").html(orderGroup.gold_coin_used.toFixed(2));
			$("#td-pay-amount").html('<strong>'+orderGroup.pay_amount.toFixed(2)+'</strong>');
			$("#td-rebate").html('<strong>'+orderGroup.rebate.toFixed(2)+'</strong>');
			
			if(orderGroup.pay_amount == 0) {
				$("#button-pay").val("确认并提交订单");
			} else {
				$("#button-pay").val("确认并在线支付");
			}
			
			$("#use-cash").html(orderGroup.cash_used.toFixed(2));
			$("#use-gold-coin").html(orderGroup.gold_coin_used);
			$("#left-cash").html(left_cash.toFixed(2));
			$("#left-gold-coin").html(left_gold_coin);
			if(account != null) {
				$("#account-cash").text(account.cash.toFixed(2));
				$("#account-gold-coin").text(account.gold_coin);
			} else {
				$("#account-cash").text("0.00");
				$("#account-gold-coin").text(0);
			}
		});
	}
	
	function payOrders() {
		var url = "/order/confirm";
		cjl.post(url, {}, function(body) {
			var orderGroupId = body;
			var url = "/alipay/submit";
			cjl.post(url, {order_group_id: orderGroupId}, function(body){
				var html = body.alipayForm;
				$("body").empty();
				$("body").html(html);
			});
			
		});
	}
	
	function toggleCash() {
		$("#div-cash").toggle("fast");
		//useAccount();
		getOrderConfirm();
	}
	
	function toggleGoldCoin() {
		$("#div-gold-coin").toggle("fast");
		//useAccount();
		getOrderConfirm();
	}
	
	function useAccount() {
		var url = "/order/confirm";
		var params = $("#form-account").serialize();
		cjl.get(url, params, function(body) {
			var orderGroup = body.orderGroup;
			resetOrderGroup();
		});
	}
	
</script>
</html>